<link href="/assets/addons/fastflow/plugins/card/card.css" rel="stylesheet" type="text/css"/>
<style>
    #selectworker table {
        border: 1px solid #d2d2d2;
        border-collapse: unset !important;
    }
    legend {
        padding-bottom:8px;
        font-size:14px;
        font-weight:600;
        padding-left: 10px;
        padding-right: 15px;
        padding-top: 8px;
        background: #f4f4f4;
        margin-bottom: 4px;
    }
    form {
        padding: 8px;
        background: #fbfbfb;
    }
    .nav-tabs-custom{
        margin-bottom: 0!important;
    }
    .main-content .tab-content{
        height: calc(100vh - 82px)!important;
        overflow: auto;
        overflow-x: hidden;
        padding: 10px 0 0 10px!important;
        scrollbar-width: thin;
        margin-bottom: 8px;
    }
    div ::-webkit-scrollbar {
        /*滚动条整体*/
        width: 4px;
        height: 8px;
        border-radius: 5px;
    }
    div ::-webkit-scrollbar-track {
        /*滚动条轨道*/
        background: #e3e3e3;
        border-radius: 2px;
    }
    div ::-webkit-scrollbar-thumb {
        /*滚动条里面的滑块*/
        background: #d1d1d1;
        border-radius: 2px;
    }
    div ::-webkit-scrollbar-thumb:hover {
        /*滚动条鼠标事件，鼠标放上去出现的事件*/
        background: #a8a8a8;
    }
    div ::-webkit-scrollbar-corner {
        /*滚动条边角*/
        background: #a8a8a8;
    }
    .btn-group a{
        font-size: 90%;
    }
    .toolbar{
        height: 38px;
        background: #fafafa;
        padding: 4px;
        border-bottom: 1px solid #efefef;
    }
    .toolbar .dropdown-menu{
        width: calc(50vw - 80px);
        height: 300px;
        overflow: auto;
        border: 1px solid #c3c3c3;
    }
    .contenedorCards .card{
        width: 180px!important;
    }
    .contenedorCards .card .wrapper .imgProd{
        height: 140px!important;
    }
    .contenedorCards .card .wrapper .infoProd{
        height: 80px!important;
    }
    .contenedorCards .card .wrapper .infoProd .actions .preciosGrupo .precio{
        font-size: 16px!important;
        text-align: center!important;
    }
    .contenedorCards .card .wrapper .infoProd .extraInfo{
        margin-top: 0!important;
    }
    .contenedorCards .card .wrapper .infoProd .actions .preciosGrupo{
        width: 122px!important;
    }
    .contenedorCards .card .wrapper .infoProd .actions .action.preview-btn {
        bottom: 80px!important;
        right: 65px!important;
    }
    .list-empty-hint{
        width: 120px;
        height: 34px;
        position: absolute;
        text-align: center;
        top:120px;
        left: calc(25vw - 90px);
        font-size: 16pt;
        font-family: '黑体';
        color: #c2c2c2;
    }
    .ebill-empty-hint{
        width: 100%;
        height: 34px;
        text-align: center;
        position: absolute;
        top:calc(50vh - 17px);
        font-size: 16pt;
        font-family: '黑体';
        color: #c2c2c2;
    }
    #fastflow-ebill{
        height: calc(100vh - 150px);
    }

</style>
<div class="row main-content">
    <div id="fastflow-left-content" class="col-md-6 col-lg-6 col-sm-6">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#start-form" data-toggle="tab" aria-expanded="true">审批：<span class="label label-info">发起</span></a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="start-form">
                    <form id="flow-form" class="form-horizontal" role="form" data-toggle="validator" method="POST"
                          action="{:url('start')}">
                        <input class="hidden" name="row[bill]" value="{$bill|htmlentities}">
                        <input class="hidden" name="row[bill_id]" value="{$bill_id|htmlentities}">
                        <input class="hidden" name="row[ebill_id]">
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('Chooseflow')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <select id="fastflow-c-flow_id" data-rule="required" class="form-control selectpicker" name="row[flow_id]">
                                    {foreach name="flows" item="flow"}
                                    <option value="{$flow['id']|htmlentities}">{$flow['name']|htmlentities}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('Startcontent')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <textarea class="form-control" name="row[checkcontent]" type="text"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('Filename')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <input id="fastflow-c-file_name" class="form-control" name="row[file_name]" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('File')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <div class="input-group">
                                    <input id="fastflow-c-file" class="form-control" size="50" name="row[file]" type="text">
                                    <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="fastflow-faupload-file" class="btn btn-danger faupload"
                                  data-input-id="fastflow-c-file" data-multiple="false" data-preview-id="fastflow-p-file"><i
                            class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                        <span><button type="button" id="fastflow-fachoose-file" class="btn btn-primary fachoose"
                                                      data-input-id="fastflow-c-file" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                    </div>
                                    <span class="msg-box n-right" for="fastflow-c-file"></span>
                                </div>
                                <ul class="row list-inline faupload-preview" id="fastflow-p-file"></ul>
                            </div>
                        </div>

                        <div id="fastflow-selectworker" class="form-group hidden">
                            <label class="control-label col-xs-12 col-sm-2">{:__('SelectWorker')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <th style="text-align: center">步骤</th>
                                        <th style="text-align: center">域</th>
                                        <th style="text-align: center">审批人员/分组</th>
                                        <th>审批模式</th>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div id="fastflow-carbon-select" class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">抄送:</label>
                            <div class="col-xs-12 col-sm-8">
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <th style="text-align: center">域</th>
                                        <th style="text-align: center">接收人（分组）</th>
                                        <th>抄送范围</th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <select id="fastflow-carbon_scope" class="form-control" style="alignment: center" name="row[carbon_scope]">
                                                {volist name='carbon_scope' id='item'}
                                                <option value="{$item['value']|htmlentities}">{$item['name']|htmlentities}</option>
                                                {/volist}
                                            </select>
                                        </td>
                                        <td>
                                            <span>
                                                <input id="fastflow-carbon_receiver" data-source="fastflow/flow/run/getSelectpageWorkers"  data-field="name" data-primary-key="id" data-multiple="true" class="form-control selectpage" name="row[carbon_receiver]" type="text">
                                            </span>
                                        </td>
                                        <td>
                                            <div class="radio">
                                                <label for="fastflow-carbon_range-1"><input id="fastflow-carbon_range-1" name="row[carbon_range]" type="radio" value="1" checked="">当前</label>
                                                <label for="fastflow-carbon_range-2"><input id="fastflow-carbon_range-2" name="row[carbon_range]" type="radio" value="2">全部</label>
                                            </div>
                                        </td>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {if count($flows)>0}
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('Preview')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <iframe id="fastflow-viewer" src="{:url('/fastflow/flow/flow/preview',['flow_id'=>$flows[0]['id'],'isstart'=>'true'])}" border="0"
                                        marginwidth="0" marginheight="0" scrolling-x="no" scrolling-y="auto" allowtransparency="yes"
                                        width="100%" style="height: calc(100vh - 280px);" frameborder="no"></iframe>
                                </iframe>
                            </div>
                        </div>
                        {else /}

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2"></label>
                            <div class=" col-xs-12 col-sm-8">
                                <b class="alert alert-danger-light" style="display: block;"><i class="fa fa-exclamation-circle" style="margin-right: 4px;"></i>没有找到匹配该单据的流程，请先进行流程设计</b>
                            </div>
                        </div>
                        {/if}
                        <div class="form-group layer-footer">
                            <label class="control-label col-xs-12 col-sm-2"></label>
                            <div class="col-xs-12 col-sm-8">
                                <div class="pull-right">
                                    <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
                                    <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="fastflow-edit-content" class="col-md-6 col-lg-6 col-sm-6">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#bill-edit" data-toggle="tab" aria-expanded="true">填写表单</a></li>
                <li><a id="ebill-tab" href="#ebill" data-toggle="tab" aria-expanded="true">电子表单</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="bill-edit"></div>
                <div class="tab-pane" id="ebill" style="overflow: hidden;">
                    <div class="toolbar" id="toolbar">
                        <div class="btn-group">
                                <a href="javascript:;" id="addebill-btn" class="btn btn-sm btn-info-light dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-plus" style="margin-right: 4px"></i> 添加表单</a>
                                <ul class="dropdown-menu" role="menu">
                                    <div class="contenedorCards" id="contenedorCards">
                                    </div>
                                    <span class="list-empty-hint">无电子表单</span>
                                </ul>
                        </div>
                        <a href="javascript:;" id="removeebill-btn" class="btn btn-sm btn-danger-light"> <i class="fa fa-remove" style="margin-right: 4px"></i> 删除表单</a>
                        <a href="javascript:;" id="refreshebill-btn" class="btn btn-sm btn-success-light"> <i class="fa fa-refresh" style="margin-right: 4px"></i> 刷新</a>
                    </div>
                    <span class="ebill-empty-hint">无电子表单</span>
                    <iframe id="fastflow-ebill" class="hidden" data-src="{:url('/fastflow/flow/ebill/preview')}" style="width: 100%;border: none;overflow: auto;margin-left: -4px;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<script id="itemTpl" type="text/html">
    <% for(var i=0; i<list.length; i++){ %>
    <div class="card">
        <div class="wrapper">
            <div class="imgProd" data-id="<%=list[i].id%>" data-title="<%=list[i].title%>" style='background-image:url("<%=list[i].thumbnail%>");background-size: 100% 100%'></div>
            <div class="infoProd">
                <p class="extraInfo"><%=list[i].info%></p>
                <div class="actions">
                    <div class="preciosGrupo">
                        <p class="precio precioProd"><%=list[i].title%></p>
                    </div>
                    <div class="action aFavs">
                        <a href="javascript:;" class="btn btn-xs btn-info-light"><i class="fa fa-file-word-o"> Word</i></a>
                    </div>
                    <div class="action selectebill-btn">
                        <a href="javascript:;" class="btn btn-xs btn-info">选择表单</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <% } %>
</script>


